const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const width = window.innerWidth * devicePixelRatio;
const height = window.innerHeight * devicePixelRatio;  
canvas.width = width;
canvas.height = height;

const fontsize = 16 * devicePixelRatio;
const columnWidth = fontsize;
const columnNum = width / columnWidth;
const nextChars =  new Array(columnNum).fill(1);


// 绘制函数
function draw() {    
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, width, height);

    for (let i = 0; i < columnNum; i++) {
        ctx.font = `${fontsize}px Consolas`;
        ctx.fillStyle = drawRandomColor();
        const x = i * columnWidth;
        const index = nextChars[i]
        const y = index * fontsize;
        ctx.fillText(getRandomChar(), x, y)
        ctx.fill()

        if(y > height && Math.random() > 0.99)
            nextChars[i] = 1;
        else
            nextChars[i] += 1;
    }
    requestAnimationFrame(draw);
}

draw();

// 获取随机的字符串
function getRandomChar(){
    const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';    
    return charSet.charAt(Math.floor(Math.random() * charSet.length));
}

// 获取随机的颜色
function drawRandomColor(){
    return '#' + Math.random().toString(16).slice(2, 8);
}